<template>
  <div style="padding: 1% 5% 0 5%">
    <div style="padding: 0 15% 20px 15%">
      <a-input-search
        v-model:value="activeKey.searchtxt"
        style="width: 100%"
        @search="getitemList"
      />
    </div>

    <a-radio-group
      v-model:value="activeKey.ordertype"
      button-style="solid"
      @change="getitemList"
    >
      <a-radio-button
        v-for="tab in ordertab"
        :key="tab.title"
        :value="tab.key"
        >{{ tab.title }}</a-radio-button
      >
    </a-radio-group>

    <a-list
      :loading="loading"
      item-layout="vertical"
      :data-source="itemList.value"
      style="padding: 1% 5% 0 5%"
    >
      

      <template #renderItem="{ item }">
        <a-list-item
          key="item.a_order"
          style="min-height: 100px; max-height: 300px"
        >
          <template #actions>
            <span :key="LikeOutlined">
              <component v-bind:is="LikeOutlined" style="margin-right: 8px" />
              {{ item.like_count }}
            </span>
            <span :key="MessageOutlined">
              <component
                v-bind:is="MessageOutlined"
                style="margin-right: 8px"
              />
              {{ item.com_count }}
            </span>
            <span :key="StarOutlined">
              <component v-bind:is="StarOutlined" style="margin-right: 8px" />
              {{ item.sub_count }}
            </span>
          </template>

          <a-list-item-meta>
            <template #title>
              <a :href="'/user/articledetail?a_id=' + item.a_id">{{
                item.a_title
              }}</a>
            </template>
          </a-list-item-meta>

          <div>{{ item.a_html }}</div>
          <div>
            <a-image
              height="60px"
              v-for="url in item.imglist"
              :key="url"
              :src="url"
            />
          </div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
<script>
import { defineComponent, ref, reactive } from "vue";
import { get, post, tip } from "@/common";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";

const activeKey = ref({
  searchtxt: "",
  ordertype: "a_date",
});
const ordertab = ref([
  { key: "a_date", title: "最新发布" },
  { key: "like_count", title: "最多点赞" },
  { key: "sub_count", title: "最多收藏" },
]);
const itemList = reactive({});
const CurrU_id = ref();
const getCurrU_id = () => {
  get("/user/home/curr-user3").then((res) => {
    CurrU_id.value = res.data.u_id;
    getitemList();
    console.log(CurrU_id.value);
  });
};
const getitemList = () => {
  let u_id = window.location.search.split("=")[1];
  if (u_id) {
    get("/user/myarticle/artlist/" + u_id,activeKey.value).then((res) => {
      itemList.value = res.data;
    });
  } else {
    get("/user/myarticle/artlist/" + CurrU_id.value, activeKey.value).then((res) => {
      itemList.value = res.data;
    });
  }
};

export default defineComponent({
  setup() {
    getCurrU_id();
    return {
      StarOutlined,
      LikeOutlined,
      MessageOutlined,
      activeKey,
      ordertab,
      itemList,
      getitemList,
      CurrU_id,
      getCurrU_id,
    };
  },
});
</script>
<style>
.ant-radio-button-wrapper,
.ant-radio-button-wrapper:last-child,
.ant-radio-button-wrapper:first-child {
  line-height: 25px;
  height: 25px;
  border-radius: 10px 10px 10px 10px;
  position: static;
  border-left: 1px solid #d9d9d9;
}
.ant-radio-button-wrapper,
.ant-radio-button-wrapper:last-child {
  margin-left: 10px;
}
.ant-radio-button-wrapper:not(:first-child)::before {
  position: fixed;
}
.ant-divider-horizontal {
  margin: 12px 0;
}
</style>
